<template>
  <el-form
    ref="userFormRef"
    :model="userForm"
    size="small"
    :inline="true"
    label-width="80px"
    :rules="userRules"
  >
    <el-form-item label="用户名" prop="username">
      <el-input
        v-model="userForm.username"
        clearable
        placeholder="用户名"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="userForm.password"
        clearable
        type="password"
        placeholder="密码"
      ></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" prop="realName">
      <el-input
        v-model="userForm.realName"
        clearable
        placeholder="真实姓名"
      ></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input
        v-model="userForm.phone"
        clearable
        placeholder="手机号码"
      ></el-input>
    </el-form-item>
    <el-form-item label="角色" prop="role">
      <el-select v-model="userForm.role">
        <el-option label="管理员" value="ROLE_admin"> </el-option>
        <el-option label="HR" value="ROLE_user"> </el-option>
      </el-select>
    </el-form-item>
    <div style="margin-left:30px">
      <el-form-item>
        <el-button type="primary" @click="handleFormSubmit">添加</el-button>
        <el-button @click="handleFormReset">重置</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { insertUserApi } from '@/api/user'
export default {
  name: 'addFrom',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const checkPhone = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入手机号码'))
      }
      // eslint-disable-next-line no-useless-escape
      let myreg = /^1[3456789]\d{9}$/
      if (!myreg.test(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    return {
      userForm: {
        username: '',
        realName: '',
        password: '',
        phone: '',
        role: 'ROLE_user',
      },
      userRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
        ],
        phone: [{ validator: checkPhone, trigger: 'blur' }],
      },
    }
  },
  created() {},
  watch: {
    dialogVisible(nVal) {
      if (!nVal) {
        this.handleFormReset()
      }
    },
  },
  methods: {
    handleFormSubmit() {
      this.$refs.userFormRef.validate(async (valid) => {
        if (!valid) return
        const { code } = await insertUserApi(this.userForm)
        if (code !== 200) return
        this.$message.success('添加用户成功')
        this.$emit('addUserSuccess')
      })
    },
    handleFormReset() {
      this.$refs.userFormRef.resetFields()
    },
  },
}
</script>

<style scoped lang="scss"></style>
